import React, { useEffect, useState } from 'react';
import { CookieIcon, XIcon } from 'lucide-react';
export const CookieBanner = () => {
  const [showBanner, setShowBanner] = useState(false);
  useEffect(() => {
    const hasAccepted = localStorage.getItem('cookiesAccepted');
    if (!hasAccepted) {
      // Small delay for better user experience
      const timer = setTimeout(() => {
        setShowBanner(true);
      }, 1000);
      return () => clearTimeout(timer);
    }
  }, []);
  const acceptCookies = () => {
    localStorage.setItem('cookiesAccepted', 'true');
    setShowBanner(false);
  };
  const declineCookies = () => {
    // Only essential cookies will be used
    localStorage.setItem('cookiesAccepted', 'essential');
    setShowBanner(false);
  };
  if (!showBanner) return null;
  return <div className="fixed bottom-0 inset-x-0 z-50 animate-fadeIn">
      <div className="bg-white shadow-lg border-t border-gray-200 p-1">
        <div className="container mx-auto px-4 py-4">
          <div className="flex flex-col md:flex-row items-center md:items-start">
            <div className="bg-cream rounded-full p-3 mr-4 mb-4 md:mb-0 flex-shrink-0">
              <CookieIcon size={24} className="text-terracotta" />
            </div>
            <div className="flex-1 md:mr-6">
              <h3 className="font-nunito font-semibold text-lg mb-2 text-center md:text-left">
                Cookie Consent
              </h3>
              <p className="text-sm text-gray-600 mb-4 text-center md:text-left">
                We use cookies to improve your experience and for analytics. By
                continuing to use this site, you agree to our{' '}
                <a href="/privacy-policy" className="text-terracotta underline hover:text-terracotta/80 transition-colors">
                  Privacy Policy
                </a>
                .
              </p>
            </div>
            <div className="flex flex-col sm:flex-row gap-3 mt-2 md:mt-0">
              <button onClick={acceptCookies} className="px-6 py-2.5 bg-terracotta text-white rounded-md hover:bg-terracotta/90 transition-colors font-medium text-sm shadow-sm">
                Accept All
              </button>
              <button onClick={declineCookies} className="px-6 py-2.5 bg-white border border-gray-300 text-dark rounded-md hover:bg-gray-50 transition-colors font-medium text-sm">
                Essential Only
              </button>
              <a href="/privacy-policy" className="px-6 py-2.5 bg-cream text-dark rounded-md hover:bg-cream/70 transition-colors font-medium text-sm text-center">
                Preferences
              </a>
            </div>
          </div>
          <button onClick={declineCookies} className="absolute top-2 right-2 text-gray-400 hover:text-gray-600 md:hidden">
            <XIcon size={20} />
          </button>
        </div>
      </div>
    </div>;
};